<template>
  <div>child2组件</div>
  <div>cityname: {{ cityStore.cityname }}</div>
  <div>num: {{ cityStore.num }} - <button @click="fn">btn</button></div>
  <div>doubleNum: {{ cityStore.doubleNum }}</div>
</template>

<script lang="ts" setup>
import { useCityStore } from "../stores/city";
// import { storeToRefs } from "pinia";

const cityStore = useCityStore();
// 不要对仓库进行解构，响应式会无效
// 可以使用storeToRefs方法进行解构，仅在于获取数据但不改变的时候好用
// let { cityname, num } = storeToRefs(cityStore);

const fn = () => {
  // 修改数据的时候，可以直接对仓库数据进行修改
  // cityStore.num++;

  // $patch方法也可以来修改数据
  // $patch方法可以一次性修改多个变量
  // cityStore.$patch({
  //   cityname: "hangzhou",
  //   num: 10,
  // });

  // 里面的参数也可以是函数，这个函数可以接受一个state作为参数
  // state表示修改之前的数据
  // cityStore.$patch((state) => ({
  //   cityname: "hangzhou",
  //   num: state.num++,
  // }));

  cityStore.$patch((state) => {
    state.cityname = "hangzhou";
    state.num++;
  });

  // setTimeout(() => {
  //   cityStore.$reset();
  // }, 2000);

  // 还可以通过actions的函数来修改仓库数据
  // actions的函数可以传参
  // cityStore.changenum({ n: 3 });
};

// 对仓库的监听，只要仓库数据发生改变，回调函数就会自动调用
cityStore.$subscribe((mutation, state) => {
  console.log(mutation);
  console.log(state);

  // 每当状态发生变化时，将整个 state 持久化到本地存储。
  // localStorage.setItem('cart', JSON.stringify(state))
});
</script>
